<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button id="conn">连接</button>
  <button id="send" disabled>发送数据</button>
  展示的数据：
  <div id="recv"></div>
  <script>
    let conn = document.getElementById('conn')
    let send = document.getElementById('send')
    let recv = document.getElementById('recv')
    let ws;
    conn.onclick = function(){
      ws = new WebSocket("ws://localhost:9998")
      ws.onopen = function(){
        console.log('连接成功')
        send.disabled = false
      }
      ws.onmessage = function(msg){
        console.log('接收数据')
        let data = JSON.parse(msg.data)
        console.log(msg)
        recv.innerText = data.action
      }
      ws.onclose=function(){
        console.log('连接关闭')
        send.disabled = true
      }
      ws.onerror = function(){
        console.log('连接异常')
        send.disabled = true
      }
    }
    send.onclick = function(){
      let data = {
        action:"dd",
        chartName:"map",
      }
      ws.send(JSON.stringify(data))
    }
  </script>
</body>
</html>